import React, { useState } from "react";
import { Form, Input, Tooltip, Icon, Row, Col, Button, notification } from "antd";
import { getCode } from "utils/api/userApi";

let codeTime = 60;
const GetCodeButton = ({ getFieldValue }) => {
  const [isGet, setIsGet] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [time, setTime] = useState(60);
  const [isDisable, setIsDisable] = useState(false);
  const handleGetCode = () => {
    let email = getFieldValue("email");
    if (!email) {
      notification.error({
        message: "请填写正确的邮箱地址",
        duration: 2,
      });
      return;
    }
    setIsLoading(true);
    setIsDisable(true);
    getCode(email)
      .then(({ err, msg }) => {
        if (err === 0) {
          notification.success({
            message: "验证码发送成功，请注意查收！",
            duration: 2,
          });
          if (!isGet) {
            setIsGet(true);
            let timer = setInterval(() => {
              if (codeTime === 0) {
                setIsGet(false);
                setIsDisable(true);
                codeTime = 60;
                clearInterval(timer);
              } else {
                codeTime--;
                setTime(codeTime);
              }
            }, 1000);
          }
        } else {
          notification.error({
            message: "验证码发送失败！",
            description: `错误原因：${msg}`,
            duration: 2,
          });
          setIsGet(false);
          setIsDisable(false);
        }
      })
      .catch((err) => {
        notification.error({
          message: "验证码发送失败！",
          description: `错误原因：${err}`,
          duration: 2,
        });
      })
      .finally(() => {
        setIsLoading(false);
        setIsDisable(false);
      });
  };
  return (
    <Button disabled={isGet} loading={isLoading} onClick={handleGetCode} ghost>
      {isGet ? `${time}秒后重新发送` : "获取验证码"}
    </Button>
  );
};

const LoginDom = (props) => {
  const {
    handleSubmit,
    form,
    validateToNextPassword,
    compareToFirstPassword,
    handleConfirmBlur,
  } = props;
  const { getFieldDecorator, getFieldValue } = form;

  return (
    <div className="register welcome">
      <h1 className="title">注册</h1>
      <div className="content">
        <Form onSubmit={handleSubmit} className="login-form">
          <Form.Item
            className="my-input"
            label={
              <span>
                账号&nbsp;
                <Tooltip title="作为登录的唯一凭证!">
                  <Icon type="question-circle-o" />
                </Tooltip>
              </span>
            }
          >
            {getFieldDecorator("username", {
              rules: [
                {
                  required: true,
                  message: "请输入账户!",
                  whitespace: true,
                },
              ],
            })(<Input className="my-input" />)}
          </Form.Item>
          <Form.Item label="密码" hasFeedback>
            {getFieldDecorator("password", {
              rules: [
                {
                  required: true,
                  message: "请输入密码!",
                },
                {
                  validator: validateToNextPassword,
                },
              ],
            })(<Input.Password className="my-input" />)}
          </Form.Item>
          <Form.Item label="确认密码" hasFeedback>
            {getFieldDecorator("confirm", {
              rules: [
                {
                  required: true,
                  message: "请再次输入密码!",
                },
                {
                  validator: compareToFirstPassword,
                },
              ],
            })(<Input.Password className="my-input" onBlur={handleConfirmBlur} />)}
          </Form.Item>
          <Form.Item className="my-input" label="邮箱">
            {getFieldDecorator("email", {
              rules: [
                {
                  type: "email",
                  message: "邮箱格式不正确!",
                },
                {
                  required: true,
                  message: "请输入邮箱!",
                },
              ],
            })(<Input className="my-input" />)}
          </Form.Item>
          <Form.Item className="my-input" label="邮箱验证" extra="我们需要通过邮箱验证您的身份">
            <Row gutter={8}>
              <Col span={14}>
                {getFieldDecorator("emailCode", {
                  rules: [
                    {
                      required: true,
                      message: "请输入你收到的验证码!",
                    },
                  ],
                })(<Input />)}
              </Col>
              <Col span={10}>
                <GetCodeButton getFieldValue={getFieldValue} />
              </Col>
            </Row>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              注册
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default LoginDom;
